<template>
  <view style="padding-bottom: 150rpx;">
    <u-navbar :border-bottom="false" title="兴瑞畅游">
      <view style="margin-right: 30rpx;" slot="right" @click="$u.route(`/mine-module/changyouList`)">报名列表</view>
    </u-navbar>
    <view style="color: #000;padding: 30rpx;font-weight: 700;font-size: 34rpx;"><text
        style="color: red;">*</text>{{details.active_name}}</view>
    <view>
      <image :src="details.introduce" mode="widthFix" style="width: 100%;"></image>
    </view>
    <view class="wrap">

      <u-form :model="form" ref="uForm" :rules="rules">
        <u-form-item label-width="150" label="真实姓名" prop="realName">
          <u-input placeholder="请输入真实姓名" v-model="form.realName " type="text"></u-input>
        </u-form-item>
        <u-form-item label-width="150" label="身份证号" prop="midentity">
          <u-input placeholder="请输入身份证号" v-model="form.midentity " type="text" maxlength="18"></u-input>
        </u-form-item>
        <u-form-item label-width="150" label="联系电话" prop="mobile">
          <u-input placeholder="请输入联系电话" v-model="form.mobile " type="number" maxlength="11"></u-input>
        </u-form-item>
        <u-form-item label-width="150" label="出发地" prop="departure">
          <u-input placeholder="请选择出发地" disabled v-model="form.departure" type="text" @click="showCity = true">
          </u-input>
          <city-select v-model="showCity" @city-change="cityChange"></city-select>
        </u-form-item>
        <u-form-item label-width="150" label="保证金方式">
          <view class="u-f-ac">
            <u-radio-group v-model="radio">
              <u-radio shape="circle" v-for="(item, index) in radioList" :key="index" :name="item.name">{{ item.name }}
              </u-radio>
            </u-radio-group>
            <view style="font-weight: 700;font-size: z34rpx;">{{radioList.find(item => item.name == radio).value}}
            </view>
          </view>
        </u-form-item>
        <u-form-item label-width="150" label="注意事项">
          <view class="u-f u-f-column">
            <view>
              1、请填写实际参与旅游人的信息
            </view>
            <view>
              2、报名者全程参与未脱团，公司审核确认后，7个工作日内退回保证金
            </view>
          </view>
        </u-form-item>
      </u-form>

    </view>
    <u-popup v-model="showPopup" mode="center" width="80%" height="35%" border-radius="30">
      <view style="padding: 50rpx;">
        <view style="font-size: 34rpx;font-weight: 700;margin-bottom: 50rpx;">请输入支付密码</view>
        <view style="width: 110%;margin-left: -24rpx;">
          <u-message-input :maxlength="6" focus breathe @finish="handlePasswordFinish" width="70" dot-fill>
          </u-message-input>
        </view>
        <view style="padding: 0 30rpx;margin: 100rpx 0 0;">
          <u-button type="success" @click="submit">确认支付</u-button>
        </view>
      </view>
    </u-popup>
    <u-button type="success" class="custom-style" @click="verfiy" shape="circle">{{btnText}}</u-button>

    <u-toast ref="uToast"></u-toast>
  </view>
</template>

<script>
  import md5Libs from "uview-ui/libs/function/md5";
  import {
    api
  } from '@/config/config.js'
  import * as API_Haibao from '@/api/haibao.js';

  import citySelect from '@/components/u-city-select.vue';
  export default {
    components: {
      citySelect
    },
    data() {
      return {
        details: {},
        btnText: '下一步',
        form: {
          realName: '',
          midentity: '',
          mobile: '',
          departure: '',

          marginType: '',
          password: '',
        },
        showCity: false,
        radio: '代金券',
        radioList: [{
          name: '代金券',
          value: 1500,
        }, {
          name: '补贴额度',
          value: 3000,
        }, ],
        showPopup: false,

        rules: {
          realName: [{
              required: true,
              message: '请输入真实姓名',
              trigger: 'blur',
            },
            {
              min: 1,
              max: 8,
              message: '姓名长度在1到8个字符',
              trigger: ['change', 'blur'],
            },
          ],
          midentity: [{
            required: true,
            message: '请输入身份证号',
            trigger: ['change', 'blur'],
          }],
          mobile: [{
              required: true,
              message: '请输入联系电话',
              trigger: ['change', 'blur'],
            },
            {
              validator: (rule, value, callback) => {
                // 调用uView自带的js验证规则，详见：https://www.uviewui.com/js/test.html
                return this.$u.test.mobile(value);
              },
              message: '手机号码不正确',
              // 触发器可以同时用blur和change，二者之间用英文逗号隔开
              trigger: ['change', 'blur'],
            }
          ],
          departure: [{
            required: true,
            message: '请选择出发地',
            trigger: 'blur',
          }, ],


        },
      }
    },
    onLoad() {
      this.getPromotionsActive()
    },
    // 必须要在onReady生命周期，因为onLoad生命周期组件可能尚未创建完毕
    onReady() {
      this.$refs.uForm.setRules(this.rules);
    },
    methods: {
      async getPromotionsActive() {
        let res = await API_Haibao.getPromotionsActive()
        console.log(res)
        this.details = res
      },
      cityChange(e) {
        console.log(e)
        this.form.departure = e.province.label + e.city.label + e.area.label;
      },
      handlePasswordFinish(password) {
        console.log(password)
        this.form.password = md5Libs.md5(password)
        if (this.radio == '代金券') {
          this.form.marginType = 1
        } else {
          this.form.marginType = 0
        }
      },
      verfiy() {
        this.$refs.uForm.validate(async valid => {
          if (valid) {
            this.showPopup = true
          } else {
            console.log('验证失败');
          }
        });
      },
      submit() {
        this.$refs.uForm.validate(async valid => {
          if (valid) {
            console.log(this.form)
            uni.showLoading({
              title: '提交中...'
            })
            setTimeout(() => {
              uni.hideLoading()
            }, 1000)
            let res = await API_Haibao.putActiveApply(this.form)
            console.log(res)
            this.showPopup = false
            if (res) {
              this.$qqyUtils.uToast.call(this, '提交成功！', 'success')
              setTimeout(() => {
                this.$u.route({
                  type: 'tab',
                  url: `/pages/tabs/mine/mine`
                })
              }, 1500)
            } else {
              this.$qqyUtils.uToast.call(this, '提交失败！', 'error')
            }
          } else {
            console.log('验证失败');
          }
        });
      }
    }
  }
</script>

<style lang="scss">
  page {
    background-color: #F8F8F8;
  }

  .wrap {
    padding: 30rpx;
    background-color: #FFFFFF;
  }

  .custom-style {
    width: 90% !important;
    position: fixed !important;
    bottom: 50rpx !important;
    left: 5% !important;
  }

  .sfz_item {
    width: 80%;
    height: 320rpx;
    padding: 20rpx 0 0;
    margin: 0 0 80rpx 10%;
    background-color: #F1F8F9;
    border: 1px solid #09BB07;
    color: #09BB07;
    border-radius: 20rpx;
    text-align: center;

    image {
      width: 100%;
      height: 80%;
      border-radius: 20rpx;
    }

    .absolutes {
      width: 100%;
      position: absolute;
      top: 120rpx;
      text-align: center;
    }
  }
</style>
